<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书架</title>
    <style>
        body{font-size: 45px;}
        body>img:first-child{width: 100%;height: 62px;}
        div:nth-child(2){background-color: #ffd8b1;width: 100%;height: 100px;margin-top: -13px;font-weight: bold;text-align: center;position: relative;}
        div.naughty>span{margin: auto;display: inline-block;height: 100px;line-height: 100px;}
        div.naughty>img{width: 58px;height: 55px;position: absolute;right:19px;top:20px;}
        span{display: inline-block;width: 30%;text-align: center;margin-left: 1.6%;vertical-align: top;font-size: 37px;margin-top:30px;}
        p{margin-bottom: 0;}
        span>img{width: 100%;}
        ul{background-color:white;list-style-type: none;padding: 0;margin: 0;border-top:1px solid #c8c8c8;position:fixed;bottom:0;width: 100%;}
        ul>li{float: left;width: 22%;margin-left: 2.4%;text-align: center;font-size: 28px;}
        p{margin: 11px 0;color: #696969;}
        ul>li>img{width: 65px;height: 65px;}
    </style>
</head>
<body>
    <img src="./images/精选_01.jpg">
    <div class="naughty">
        <span>书架</span><img src="images/书架_1.png">
    </div>
        <span><img src="./images/书架_2.png"><p>凤倾天下</p></span>
        <span><img src="./images/书架_3.png"><p>倾尽天下</p></span>
        <span><img src="./images/书架_4.png"><p>沉香如屑</p></span>
        <span><img src="./images/书架_5.png"><p>晴云流</p></span>
        <span><img src="./images/书架_6.png"><p>凤血</p></span>
        <span><img src="./images/书架_7.png"></span>
    <ul>
        <li><img src="./images/书架_17.png"><br/>精选</li>
        <li><img src="./images/精选_33.jpg"><br/>书库</li>
        <li><img src="./images/书架_8.png"><br/>书架</li>
        <li><img src="./images/精选_37.jpg"><br/>我的</li>
    </ul>
</body>
</html>